<template>
  <!-- 主页面 -->
  <div>
    <!-- 打款弹窗 -->
    <el-dialog v-model="payDialogVisible" title="打款操作" width="500px" :close-on-click-modal="false">
      <el-form :model="payForm" :rules="payRules" ref="formRef" label-width="100px">

        <!-- 打款金额 -->
        <el-form-item label="打款金额" prop="amount">
          <el-input-number v-model="payForm.amount" :precision="2" :step="0.01" :min="0.01" style="width: 100%;"
            placeholder="请输入打款金额" />
        </el-form-item>

        <!-- 备注信息 
        <el-form-item label="备注" prop="remark">
          <el-input
            v-model="payForm.remark"
            type="textarea"
            :rows="3"
            placeholder="请输入备注信息"
          />
        </el-form-item>
-->
        <!-- 打款时间 -->
        <el-form-item label="打款时间" prop="payTime">
          <el-date-picker v-model="payForm.payTime"  type="datetime"
               value-format="x"
             placeholder="选择打款时间" style="width: 100%;" />
        </el-form-item>

        <!-- 打款回单上传 -->
        <el-form-item label="打款回单" prop="receipt">
          <UploadImg v-model="payForm.receiptUrl" />
          <div class="el-upload__tip">支持 jpeg, png, gif格式文件，最多上传 1 个文件</div>
        </el-form-item>

      </el-form>

      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitPayForm" :disabled="formloading">确 定</el-button>
          <el-button @click="payDialogVisible = false">取 消</el-button>

        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import * as OrderWithdrawalSummaryApi from '@/api/hotel/orderwithdrawalsummary'
import CryptoJS from 'crypto-js'
const message = useMessage() // 消息弹窗
const { t } = useI18n() // 国际化

// 弹窗控制
const payDialogVisible = ref(false)

defineOptions({ name: 'payform' })
// 表单数据
const payForm = ref({
  id: undefined,
  amount: undefined,
  remark: '',
  payTime: undefined, // 默认当前时间
  receiptUrl: '' // 回单文件 URL
})

// 表单验证规则
const payRules = reactive({
  amount: [{ required: true, message: '请输入打款金额', trigger: 'blur' }],
  payTime: [{ required: true, message: '请选择打款时间', trigger: 'change' }],
  receiptUrl: [{ required: true, message: '请上传打款回单', trigger: 'change' }]
})
const formRef = ref();
// 打开弹窗
const open = async (id: any) => {
  payDialogVisible.value = true
  payForm.value.id = id
  // 可在此处重置表单
  resetForm()
}
defineExpose({ open })
// 重置表单
const resetForm = () => {
  formRef.value?.resetFields()
  payForm.value.amount = undefined
  payForm.value.remark = ''
  payForm.value.payTime = undefined
  payForm.value.receiptUrl = ''
}

const formloading = ref(false)
const emit = defineEmits(['success'])
// 提交打款表单
const submitPayForm = async () => {
  await formRef.value.validate();
  console.log('提交打款数据:', payForm.value)
  formloading.value = true;
  try {
    const data = payForm.value as unknown as OrderWithdrawalSummaryApi.OrderWithdrawDkVO;
    data.requestId = `dk_${CryptoJS.MD5(String(data.id))}`
    const res = await OrderWithdrawalSummaryApi.dkHandle(data);
    if (res) {

      message.success(t('common.updateSuccess'))
    } else {
      message.success("该打款提交失败，请稍后再试");
    }
    payDialogVisible.value = false
    // 发送操作成功的事件
    emit('success')
  } finally {
    formloading.value = false

  }

}
</script>